import React, { Component } from "react";
import { Link, withRouter } from "react-router-dom";
import { Menu, Icon } from "antd";
import "./index.less";
import logoImg from "../../assets/images/logo.png";
import menuList from "../../config/menuConfig";
const { SubMenu } = Menu;

class LeftNav extends Component {
  getMenuNodes = menuList => {
    return menuList.map(item => {
      if (!item.children) {
        return (
          <Menu.Item key={item.key}>
            <Link to={"/" + item.path}>
              <Icon type={item.icon} />
              <span>{item.title}</span>
            </Link>
          </Menu.Item>
        );
      } else {
        let path = this.props.location.pathname.slice(1).split("/")[0];
        // console.log(path);
        //   查找一个与当前请求路径匹配的子item
        const cItem = item.children.find(cItem => cItem.key === path);
        // 如果存在，说明当前的item的子列表需要打开
        // console.log(cItem);
        if (cItem) {
          this.openKey = item.key;
        }

        return (
          <SubMenu
            key={item.key}
            title={
              <span>
                <Icon type={item.icon} />
                <span>{item.title}</span>
              </span>
            }
          >
            {this.getMenuNodes(item.children)}
          </SubMenu>
        );
      }
    });
  };
  // 在第一次render()之前执行一次
  //   为第一个render()准备数据 (同步数据)
  componentWillMount() {
    this.menuNodes = this.getMenuNodes(menuList);
  }
  render() {
    // debugger;
    // 如果有二级路由比如 商品管理/编辑 也要高亮当前菜单
    let path = this.props.location.pathname.slice(1).split("/")[0];
    // 如果有二级路由比如 商品管理/编辑 也要打开当前菜单项
    let openKey = this.openKey;

    console.log(openKey, "render**************");
    return (
      <div className="left-nav">
        <Link to="/">
          <div className="left-nav-header">
            <div className="part">
              <img src={logoImg} alt="" />
            </div>
            <div className="part">
              <span>良品铺</span>
            </div>
          </div>
        </Link>
        {/* 导航栏 */}
        <Menu
          style={{ background: "#1f222b", color: "white" }}
          // 打开组 orderqueryhome
          defaultOpenKeys={[openKey]}
          // 选中组中的子菜单  orderquery
          selectedKeys={[path]}
          mode="inline"
          theme="dark"
        >
          {this.menuNodes}

          {/* <Menu.Item key="1">
            <Link to="/home">
              <Icon type="pie-chart" />
              <span>首页</span>
            </Link>
          </Menu.Item>
          <SubMenu
            key="sub1"
            title={
              <span>
                <Icon type="mail" />
                <span>商品</span>
              </span>
            }
          >
            <Menu.Item key="5">
              <Link to="/category">
                <Icon type="mail" />
                品类管理
              </Link>
            </Menu.Item>
            <Menu.Item key="6">
              <Link to="/product">
                <Icon type="mail" />
                商品管理
              </Link>
            </Menu.Item>
          </SubMenu>
          <SubMenu
            key="sub2"
            title={
              <span>
                <Icon type="appstore" />
                <span>Navigation Two</span>
              </span>
            }
          >
            <Menu.Item key="9">Option 9</Menu.Item>
            <Menu.Item key="10">Option 10</Menu.Item>
            <SubMenu key="sub3" title="Submenu">
              <Menu.Item key="11">Option 11</Menu.Item>
              <Menu.Item key="12">Option 12</Menu.Item>
            </SubMenu>
          </SubMenu> */}
        </Menu>
      </div>
    );
  }
}
// withRouter高阶组件：
// 包装非路由组件，返回一个新的组件
// 新的组件向非路由组件传递3个属性： history/location/match
export default withRouter(LeftNav);
